<template>
  <view>
    <view class="head">
      <image src="@assets/binding.png" class="binding" mode="widthFix"></image><text>手机绑定</text>
    </view>
    <view class="box">
      <form @submit="bdSubmit" bindreset="formReset">
        <view
          style="
            text-align: center;
            width: 100%;
            color: red;
            line-height: 50rpx;
            height: 60rpx;
            border-bottom: dotted 1rpx #ff0000;
          "
          >您尚未绑定，请完善绑定信息！</view
        >

        <view class="set-box1">
          <text class="set-tex1">姓名</text>
          <input type="text" class="set-inp" placeholder="输入您的姓名" name="name" model:value="userinfo.name" />
        </view>

        <view class="set-box1">
          <text class="set-tex1">身份证号码</text>
          <input
            type="text"
            class="set-inp"
            placeholder="输入您的身份证号"
            name="idcard"
            model:value="userinfo.idcard"
          />
        </view>

        <view class="set-box1">
          <text class="set-tex1">手机号码</text>
          <input type="text" class="set-inp" name="tel" model:value="tel" @input="bindinput" />
          <!-- <input type='text' class='set-inp' name="tel" value="13648611094"></input>-->
        </view>

        <view class="set-box1">
          <text class="set-tex1">手机验证码</text>
          <input type="text" class="set-inpyz" name="yzm" placeholder="输入验证码" value="" />

          <view>
            <button @tap="countdown" :disabled="isDisabled" class="yzm">{{ title }}</button>
          </view>
        </view>

        <button class="set-bdbtn" formType="submit">绑定手机</button>
      </form>
    </view>
  </view>
</template>

<script>
import Taro from '@tarojs/taro';
import Toast from '@components/vant/toast/toast';
import { sentsms, binding } from '@api/gongzi';
export default {
  data() {
    return {
      userinfo: [],
      tel: '',
      title: '发送验证码', // 按钮中显示的字符
      titleConst: '发送验证码', // 重置后的按钮中显示的字符
      count: 60, // 倒计时的秒数
      countConst: 60, // 重置后的倒计时的秒数
      isDisabled: false, // 按钮是否禁用
    };
  },
  methods: {
    countdown(e) {
      let count = this.count;
      var that = this;
      var formdata = e.detail.value;
      console.log(formdata);
      let tel = this.tel;
      sentsms({ tel: tel }).then((res) => {
        if (!res.code == 1) {
          // Toast.fail(res.msg);
          // console.log(data.data);
          Toast.success('发送成功');
        }
      });

      var countdown = setInterval(() => {
        if (count == 0) {
          this.title = this.titleConst;
          this.count = this.countConst;
          this.isDisabled = false;

          // 取消定时器
          clearInterval(countdown);
        } else {
          this.title = count-- + 's后重试';
          this.isDisabled = true;
        }
      }, 1000);
    },
    bindinput(e) {
      this.tel = e.detail.value;
    },
    bdSubmit(e) {
      Taro.showLoading({
        title: '加载中',
      });

      var formdata = e.detail.value;
      formdata.month = this.birthday;
      formdata.gsid = Taro.getStorageSync('gsid');
      binding({ formdata: formdata }).then((data) => {
        if (data.code == 0) {
        
           Taro.showToast({
             icon:'none',
             title: data.msg,
             duration: 2000
           });
          this.$store.dispatch('binding/binding').then((res) => {
            Taro.navigateBack({});
          });
        }
      });
    },
  },
};
</script>

<style>
page {
  background: #fff;
  font-family: Microsoft Yahei;
  font-size: 30px;
  height: 100%;
}
.box{
    padding: 20px;
}
.head {
  width: 95%;
  height: 250px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4da6ff;
  font-size: 60px;
  color: #fff;
  border-radius: 0 0 40px 40px;
}
.binding {
  width: 60px;
  margin-right: 30px;
}
.gongzi {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -41px;
  height: auto !important;
  padding-bottom: 200px;
  position: relative;
}
.adbottom {
  width: 90%;
  /* height: 300px; */
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -45%;
  /* padding-bottom:20px */
}

/*暂无*/
.zan-box {
  width: 100%;
  text-align: center;
  margin-top: 40%;
  float: left;
}
.zan-img {
  width: 50px;
  height: 50px;
  display: inline-block;
}
.zan-text {
  display: block;
  text-align: center;
  color: #b8b8b8;
  font-size: 14px;
  width: 100%;
  margin-top: 10px;
}
.set-box {
  width: 100%;
  float: left;
  background: #fff;
  padding: 0 20px;
  box-sizing: border-box;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
.set-box1 {
  width: 100%;
  float: left;
  border-bottom: 1px #ededed solid;
  padding: 5px 0px;
}
.picker {
  height: 70px;
  line-height: 70px;
  margin-left: 50px;
}
.set-tex1 {
  display: block;
  height: 80px;
  line-height: 80px;
  color: #333;
  float: left;
  margin-right: 15rpx;
  width: 200px;
  text-align: left;
}
.set-inp {
  height: 80px;
  line-height: 80px;
  overflow: hidden;
  margin-left: 0px;
  float: left;
  color: #000;
  width: 360rpx;
}

.set-inpyz {
  height: 80px;
  line-height: 80px;
  overflow: hidden;
  margin-left: 0px;
  float: left;
  color: #000;
  width: 240rpx;
}

.set-add {
  width: 40px;
  height: 40px;
  margin-left: 10px;
  display: block;
  float: left;
}
.set-textarea {
  border: 1px #ededed solid;
  border-radius: 5px;
  float: left;
  width: 100%;
  box-sizing: border-box;
  height: 80px;
  padding: 5px;
  margin: 8px 0;
  color: #666;
}
.set-btn {
  width: 90%;
  margin: 0 5%;
  height: 70px;
  line-height: 70px;
  background: #056ba7;
  color: #fff;
  font-size: 30px;
  margin-top: 20px;
  float: left;
  margin-bottom: 30rpx;
}

.set-bdbtn {
  width: 90%;
  margin: 0 5%;
  height: 70px;
  line-height: 70px;
  background: #c55f30;
  color: #fff;
  font-size: 30px;
  margin-top: 40px;
  float: left;
  margin-bottom: 30rpx;
}

.set-radio {
  height: 30px;
  line-height: 30px;
  color: #666;
}
.set-radio radio {
  transform: scale(0.8);
}
.gz {
  width: 100%;
  height: auto;
  clear: both;
  margin-top: 640rpx;
}
.gztitle {
  text-align: center;
  width: 100%;
  font-size: 35rpx;
  color: rgb(160, 156, 156);
  font-weight: bold;
  line-height: 50rpx;
}

.gzimg {
  width: 100%;
  height: auto;
  clear: both;
}
.gzz {
  margin-bottom: 30rpx;
  /* border-bottom: 1rpx solid #d1e7f7; */
  display: block;
  width: 100vw;
  padding-bottom: 30rpx;
  /* display:flex */
}
.gzli {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1rpx dotted #dbd8d8;
  height: 80rpx;
  line-height: 80rpx;
  display: block;
  display: flex;
}
.gz1 {
  color: rgb(177, 174, 174);

  height: 80rpx;
  line-height: 80rpx;
  margin-right: 20rpx;
}
.gz2 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
  /* width: 50%; */
  /* float: left; */
  height: 80rpx;
  line-height: 80rpx;
}
.gz3 {
  width: 50%;
  /* float: left; */
  height: 80rpx;
  line-height: 80rpx;
}

.yzm {
  width: 200rpx;
  float: left;
  background-color: rgb(34, 185, 42);
  font-size: 26rpx;
  line-height: 80px;
  height: 80px;
  color: rgb(252, 246, 246);
}
</style>